<template>
    <div class="card w-100% h-100%">
            <el-row>
                <el-col :span="24">
                    <el-form v-auth="'userSearch'" :inline="true" :model="searchForm">
                        <el-form-item label="用户名">
                            <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable
                                @keyup.enter="search()"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="searchForm.nickname" placeholder="请输入昵称" clearable
                                @keyup.enter="search()"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search()" :icon="Search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row>
                <el-table border :data="userDate" class="w-100%">
                    <el-table-column prop="avatar" label="头像" width="55">
                        <template #default="scope">
                            <div class="flex justify-center">
                                <img :src="scope.row.avatar" class="avatar" width="40" height="40" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" label="用户名" width="120" />
                    <el-table-column prop="nickname" label="昵称" width="120" />
                    <el-table-column prop="genderMean" label="性别" />
                    <el-table-column prop="statusMean" label="状态" />
                    <el-table-column prop="typeMean" label="类型" width="120" />
                    <el-table-column prop="roleName" label="角色" width="160">
                        <template #default="scope">
                            <div class="flex justify-center">
                                {{ scope.row.roleName }}
                                <el-link v-auth="'roleConfig'" class="ml-2" :icon="Edit"
                                    @click="showRoleConfig(scope.row)" type="primary"></el-link>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="120" />
                    <el-table-column v-auth="['userEdit', 'userDelete']" prop="userId" label="操作" width="200"
                        fixed="right">
                        <template #default="scope">
                            <div class="flex justify-center">
                                <el-button v-auth="'userEdit'" type="primary" @click="handleEdit(scope.row)"
                                    :icon="Edit">编辑</el-button>
                                <el-button v-auth="'userDelete'" type="danger" @click="handleDelete(scope.row)"
                                    :icon="Delete">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row class="mt-5">
                <el-pagination v-model:current-page="searchForm.current" v-model:page-size="searchForm.size"
                    layout="total,sizes,prev, pager, next,jumper" :page-sizes="[10, 50, 100, 200, 500]" :total="total"
                    @size-change="handleSizeChange" :background="true" @current-change="handleCurrentChange" />
            </el-row>
            <!-- 新增或修改 -->
            <editUser ref="editUserRef" :id="id" @confirm="search"></editUser>
            <!-- 权限配置 -->
            <roleConfig ref="roleConfigRef"></roleConfig>
    </div>
</template>
<script setup>
defineOptions({
    name: 'user',
});
import { ref, onMounted } from "vue";
import { getUserList, deleteUser } from "@/api/modules/user";
import { ElMessage, ElMessageBox } from "element-plus";
import editUser from "../common/editUser.vue";
import roleConfig from "../common/roleConfig.vue";
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue'
const total = ref(0);
const searchForm = ref({
    username: "",
    nickname: "",
    size: 10,
    current: 1,
    type: "1",
    departmentId: ""
});

const userDate = ref([]);
// 新增或修改
const editUserRef = ref(null);
onMounted(() => {
    search();
});
const search = () => {
    getUserList(searchForm.value).then(res => {
        userDate.value = res.data.others;
        total.value = res.data.total;
    });
};
const handleSizeChange = val => {
    searchForm.value.size = val;
    search();
};
const handleCurrentChange = val => {
    searchForm.value.current = val;
    search();
};
const handleEdit = row => {
    editUserRef.value.openDialog(row.userId);
};
const handleDelete = row => {
    //确认删除
    ElMessageBox.confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        deleteUser(row.userId).then(res => {
            if (res.code === 200) {
                ElMessage.success("删除成功！");
                search();
            }
        });
    });
};
const roleConfigRef = ref(null);
const showRoleConfig = row => {
    roleConfigRef.value.openDialog(row.roleId);
};
</script>
<style scoped>
.avatar {
    border-radius: 50%;
}
</style>